<template>
  <div class="bottom">
    <!-- 消息框 -->
    <el-input v-model="textarea2" :autosize="{ minRows: 6, maxRows: 10 }" type="textarea" placeholder="请输入要发送的消息..."
      resize="none" />
    <div class="send">
      <button @click="sendMessage">发送(s)</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 导入发送接口
import { setSentAPI } from '@/apis/sendAPI'
const textarea2 = ref('')
// 接收父组件friendId数据
const props = defineProps({
  message: Number
})

// 执行完本语句,客户端就会与服务器进行连接。
const localuser=JSON.parse(localStorage.getItem('user'))//从本地获取token
const Authorization=localuser.userInfo.dataOne
var ws = new WebSocket('wss://5987g53p36.zicp.fun/websocket/username',[Authorization]);
ws.onopen = function (evt) {
    console.log("服务器已经打开");
  };
// 发送消息
const sendMessage = async () => {
  // ws.send(userInfo);
  const recvId = props.message
  const content = textarea2.value
  const type = 0
  await setSentAPI({ recvId, content, type })
}

ws.onmessage = (evt) => {
  console.log("接收到的数据是: " + evt.data);
  // ws.close();
};
// ws.onclose = function (evt) {
//   console.log("连接关闭");
// };



</script>

<style lang="scss" scoped>
.bottom {
  height: 20vh;
  background-color: greenyellow;


  .send {
    height: 6.1vh;
    background-color: #ffffff;

    // 发送按钮
    button {
      float: right;
      margin-right: 2vw;
      width: 6vw;
      height: 4vh;
      border: 0;
      font-size: .9vw;
      color: #19c36a;

      &:hover {
        opacity: 0.6;
      }
    }
  }
}
</style>